<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/util.css" />
<link rel="stylesheet" href="css/collect.css" />
<title>医院的预约管理</title>
<style>
/*立即预约二维码*/
.navigate_head .immediately{
	width: 140px;
  	height: 30px;line-height: 30px;
 	border-radius: 5px;
  	border: solid 1px #dcdcdc;
  	position: absolute;
  	right: 40px;top: 5px;
  	color: black;
  	font-size: 14px;
}

.popup_box .public_input{
	margin: 15px 0;
}
.public_input .appoint_result_list {
	float: none;
	width: 600px;
	margin-left: 30px;
}
.public_input .appoint_result_list p{
	width: 100%;
}
.public_input .appoint_result_list .appoint_result{
	width: 200px;
}
.public_input .appoint_result_list .appoint_result_detail{
	width: 320px;
}
.public_input .hint{
	position: absolute;
	right: 0;
	font-size: 13px;
}

.head_area .public_input span{
	width: 100px;font-size: 18px;
}
.head_area .public_input input,
.head_area .public_input select{
	width: 280px;margin-left: 10px;
}
</style>
</head>
<body>
<div class="content appointment">
	<div class="navigate_head clearfix" style="position: relative;">
		<p class="" onclick="window.location.href='appointment_list.html'">预约列表</p>
		<p class="navi_null"></p>
		<p class="immediately">立即预约二维码</p>
	</div>
	<!--头部功能-->
	<div class="head_area flex_vertical" style="display: block;">
		<div class="public_input">
			<span>预约状态：</span>
			<select class="appoint_status" style="width: 280px;">
				<option value="">请选择</option>
				<option value="success">已预约</option>
				<option value="complete">已完成</option>
				<option value="cancel">已取消</option>
			</select>
		</div>
		<div class="public_input">
			<span>项目分类：</span>
			<select class="proj_type" style="width: 280px;">
				<option value="">请选择</option>
				<option value="doctor">预约项目</option>
				<option value="coupon">体验券</option>
				<option value="product">特价</option>
			</select>
		</div>
		<button class="search" style="margin-left: 10px;">搜索</button><br />
		<div class="public_input">
			<span >关键词：</span>
			<input type="text" class="keyword" placeholder="搜索患者（姓名、手机号）" style="width: 280px;"/>
		</div>
	</div>
	<table>
		<thead>
			<tr>
				<td>预约编号</td>
				<td>患者姓名</td>
				<td>联系方式</td>
				<td>项目分类</td>
				<td>项目名称</td>
				<td>预约时间</td>
				<td>预约状态</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody class="tbody">
			<!--<tr>
				<td><div class="flex_all_center"><img src="img/activity_manage/select.png"/>&nbsp;<span>921614597713019</span></div></td>
				<td>2017-08-12</td>
				<td>2017-03-02</td>
				<td>176 0652 0935</td>
				<td>口腔科</td>
				<td>蔡晓云(杭州梦桃口腔门诊部)</td>
				<td>补牙</td>
				<td>预约已取消</td>
				<td>
					<button class="btn_red">删除</button>
				</td>
			</tr>-->
		</tbody>
	</table>
	<!--分页-->
	<div class="page flex_vertical">
		<button class="" onclick="indexPage()">首页</button>&nbsp;
		<button class="" onclick="backPage()"><上一页</button>&nbsp;
		<!--页码-->
		<p class="page_num">
			<!--<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>-->
		</p>....
		<button class="" onclick="nextPage()">下一页></button>&nbsp;
		<button class="" onclick="endPage()">末页</button>&nbsp;
		共<span class="all_recode">0 </span>记录&nbsp;|
		共<span class="all_page">0 </span>页&nbsp;
		到第<input class="select_page" />页&nbsp;
		<button class="confirm_page" onclick="skipPage()">确定</button>
	</div>
</div>
<!--遮罩层-->
<div class="shade none"></div>
<!--去生成二维码弹框-->
<div class="popup_box make_code none">
	<p class="img_close clearfix">
		<img src="img/close.png" onclick="close_box()"/>
	</p>
	<div>
		<!--<div class="public_input">
			<span style="width: 80px;">审核:</span>
			<input type="button" class="bg_green enabled" value="通过" data_val="true"/><input type="button" class="disable" value="不通过" data_val="false"/>
		</div>
		<div class="public_input clearfix cause_parent" style="display: none;">
			<span style="width: 80px;float: left;">原因:</span>
			<textarea class="cause" style="margin-left: 30px;width: 320px;float: left;min-height: 80px;"></textarea>
		</div>-->
		
		<div class="public_input">
			<span style="width: 120px;">选择医生:</span>
			<select class="doctor_list" style="width:300px;">
				<option>请选择</option>
			</select>
		</div>
	</div>
	<p class="confirm confirm_code" style="width: 150px;margin-left: 155px;">生成二维码</p>
</div>
<!--二维码弹框-->
<div class="popup_box code_box none" style="padding-bottom: 20px;">
	<p class="img_close clearfix">
		<img src="img/close.png" onclick="close_code_box()"/>
	</p>
	<div class="code" style="display: inline-block;margin-left:120px;">
		
	</div>
</div>
<!--检查弹框-->
<div class="popup_box examine none" style="top: 50px;width: 600px;height: 580px;overflow-y: auto;position: absolute;">
	<p class="img_close clearfix">
		<img src="img/close.png" onclick="close_box();window.location.href='appointment_list.html'"/>
	</p>
	<div>
		<div class="public_input">
			<span style="text-align: left;text-indent: 30px;">主诉:</span><br />
			<input type="text" class="mainStatement" style=""/>
		</div>
		<div class="public_input">
			<span style="text-align: left;text-indent: 30px;">现病史:</span><br />
			<input type="text" class="currentDiseaseHistory"/>
		</div>
		<div class="public_input clearfix" style="height: auto;width: 437px;">
			<span style="text-indent: 30px;width: 210px;">实验室检查/辅助检查</span><span class="hint">例：B超-检查是否有肿瘤等</span><br />
			<div class="appoint_result_list">
				<p>
					<input type="text" class="appoint_result appoint_result_name" placeholder="如"/>
					<input type="text" class="appoint_result appoint_result_detail" placeholder="如"/>
					<span class="font_green" onclick="special_addTag.addResult(this)">[+]</span>
				</p>
			</div>
		</div>
		<p style="text-indent: 25px;">合计:</p>
		<div class="public_input" style="height: auto;">
			<span style="width: 160px;">预交总费用:</span>
			<input type="text" class="amount"  style="width: 250px;"/>
		</div>
		<div class="public_input" style="height: auto;">
			<span style="width: 160px;">医保费用:</span>
			<input type="text" class="medicareAmount"  style="width: 250px;"/>
		</div>
	</div>
	<p class="confirm_examine" style="margin-left: 195px;background: #00AFA1;width: 70px;height: 40px;line-height: 40px;text-align: center;color: white;border-radius: 5px;">确 定</p>
</div>
<script type="text/javascript" src="plug/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="plug/template-web.js"></script>
<script type="text/javascript" src="js/toggle.js" ></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/method.js"></script>
<script type="text/javascript" src="js/addTag.js" ></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="plug/qrcode/jquery.qrcode.min.js" ></script>
<script type="text/javascript" src="plug/qrcode/newCode.js" ></script>
<script id="test_appointment_list" type="text/html">
	{{each data value}}
		<tr>
			<td>
				<div class="flex_all_center">
					<!--<img src="img/select.png"/>&nbsp;-->
					<span>{{value.sn}}</span>
				</div>
			</td>
			<td>{{value.fullname}}</td>
			<td>{{value.mobile}}</td>
			<td>
				{{if value.type== "doctor"}}预约项目{{else if value.type == "coupon"}}体验券{{else if value.type == "product"}}特价{{/if}}
			</td>
			<td>{{value.projectName}}</td>
			<td>{{value.reservationDate}}</td>
			<td>{{if value.status== "success"}}已预约{{else if value.status == "complete"}}已完成{{else if value.status == "cancel"}}已取消{{/if}}</td>
			<td data_id = "{{value.id}}">
				<!--特价项目-->
				{{if value.type == "doctor"}}
					{{if value.status == "success"}}
						<button class="font_green" onclick="examine(this)">检查</button>&nbsp;&nbsp;
						<button class="font_green" onclick="diagnose(this)">诊断</button>
					{{/if}}
				{{else}}
				<!--其他项目-->
					{{if value.status == "success"}}
						<button class="font_green" onclick="firm(this)">完成</button>
					{{/if}}
				{{/if}}
			</td>
		</tr>
	{{/each}}
</script>
<!--医生列表-->
<script type="text/html" id="test_doc_list">
	{{each data value}}
		<option value="{{value.id}}">{{value.name}}</option>
	{{/each}}
</script>
<script>

//1,立即预约
$(".immediately").click(function(){
	$('.shade').css("display","block");
	$('.make_code').css("display","block");
	//初始化医生列表
	$(".doctor_list").html("<option selected='selected' value=''>请选择</option>");
	$.initSelect("/hospital/topthree/doctor/getListBySelect.json","test_doc_list",".doctor_list");
	
});
var doc_id="";
$(".doctor_list").change(function(){
	doc_id = $(".doctor_list").val();
});
//生成二维码
$(".confirm_code").click(function(){
	var data = {
		"doctorId":doc_id	
	}
	console.log(data);
	$.get_ajax("/hospital/topthree/doctor/getDoctorQRcode.json",data,function(res){
		if(res.success==true){
			console.log(res.data);
			//生成二维码
			$(".code_box,.shade").show();
			newCode(".code",res.data);
			
		}else{
			alert(res.data);
		}
	});
});
//关闭二维码弹框
function close_code_box(){
   	$('.shade').css("display","none");
	$('.popup_box').css("display","none");
	window.location.href = "appointment_list.html";
}

//2,点击完成
function firm(m){
	var appoint_id = $(m).parent().attr("data_id");
	window.localStorage.setItem("appoint_id",appoint_id);
	//利用对话框返回true或者false
	if(confirm("确定完成？")){
		//如果是true，发送请求，删除自己
		var data = {
			"id":appoint_id
		}
		$.post_ajax("/hospital/reservation/completed",data,function(res){
			if(res.success==true){
//				window.location.href = "appointment_list.html";
				$(m).parent().prev().text("已完成");  
				$(m).remove();
			}else{
				alert(res.data);
			}
		});
		
	}else{
		alert("取消");
	}
}

//3,去检查
function examine(m){
	$('.shade').css("display","block");
	$('.examine').css("display","block");
	var appoint_id = $(m).parent().attr("data_id");
	window.localStorage.setItem("appoint_id",appoint_id);
}
//检查确定
$(".confirm_examine").click(function(){
	var amount = $(".amount").val();
	//非必填
	var medicareAmount = $(".medicareAmount").val();
	var mainStatement = $(".mainStatement").val();
	var currentDiseaseHistory = $(".currentDiseaseHistory").val();
	
	var data = {
		"reservationId":$.get_storage("appoint_id"),
		"amount":amount,
		//非必填
		"medicareAmount":medicareAmount,
		"mainStatement":mainStatement,
		"currentDiseaseHistory":currentDiseaseHistory
//		"censorItems":toHash(special_addTag.getResult()),
	}
	$('.appoint_result_name').each(function (index,value) {
	    var value = value.value;
	    if(!$.verify(value,"检查项目名称")){
	    	return false;
	    }
	    //console.log(src)
	    //属性名是变量的时候，得用[]括号
	    data['censorItems['+index+'].name'] = value;
	});
	$('.appoint_result_detail').each(function (index,value) {
	    var value = value.value;
	    //console.log(src)
	    data['censorItems[' + index + '].description'] = value;
	});
	console.log(data);

//	验证
	if(!$.verifyNum(amount,"预交总费用")){return false;}
	$.post_ajax("/hospital/topthree/censor/add",data,function(data){
		if(data.success==true){
//			alert("data.data");
			$(".shade,.popup_box").hide();
			window.location.href = "appointment_list.html";
		}else{
			alert(data.data);
		}
	});
});

//4,诊断
function diagnose(m){
	var appoint_id = $(m).parent().attr("data_id");
	window.localStorage.setItem("appoint_id",appoint_id);
	window.location.href = "diagnose.html";
}



//设置审核状态
var flag=true;
$(".enabled,.disable").click(function(){
	flag = $(this).addClass("bg_green").attr("data_val");
	$(this).siblings().removeClass("bg_green");
	console.log(flag);
	if(flag=="false"){
//		显示原因
		$(".cause_parent").show();	
	}else{
		$(".cause_parent").hide();
	}
});

</script>
<script>
//请求方法
function reqPage(data){
	console.log(data);
	control_page.init_page(data,function(data){
		//调用ajax
		$.get_ajax("/hospital/reservation/getList.json",data,function(data){
			console.log(data);
//			data.data[0].type="product";//模拟是特价
			var html = template('test_appointment_list',data);
			$(".tbody").html(html);
			//初始化分页
			control_page.currentPage(control_page.page_num,data.totalCount);
		});
	});
}

var appoint_status="";
var proj_type = "";
//预约状态
$(".appoint_status").change(function(){
	appoint_status = $(".appoint_status").val();
	console.log(appoint_status);
});
//项目类型
$(".proj_type").change(function(){
	proj_type = $(".proj_type").val();
	console.log(proj_type);
});
$(function(){
	reqPage(control_page.getData());
		//搜索
	$(".head_area .search").click(function(){
		//基本条件
//		var data = control_page.getData();
		var data = {
			"pageNumber":1,//当前页
			"pageSize":10//每页的长度
		}
		//项目名称
		var keyword = $(".keyword").val();
		if(keyword != ""){
			data.keyword = keyword;
			console.log(data);
		}
//		console.log(pass_val);
		//预约状态
		if(appoint_status != ""){
			data.status = appoint_status;
			console.log(data);
		}
		//项目分类
//		console.log($.regNum(proj_type_id));
		if(proj_type != ""){
			data.type = proj_type;
			console.log(data);
		}
		console.log(data);
		reqPage(data);
	});
});

</script>
<script>
var special_addTag = {
	num:1,
	//增约定效果
	addResult:function(m){
		this.num++;
		var html = "<p>"
					+"<input type='text' class='appoint_result appoint_result_name' placeholder='如' />"
					+"<input type='text' class='appoint_result appoint_result_detail' placeholder='如'/>"
					+"<span class='font_green' onclick='special_addTag.delResult(this)'> [-]</span>"
					+"</p>";
		$(m).parents(".appoint_result_list").append(html);
	},
	//减约定效果
	delResult:function(m){
		this.num--;
		$(m).parent("p").remove();
	},
	//初始化约定效果
	init_appoint_result:function(m,tag){
		if(!m[0]){
			return false;
		}
//		console.log("沃日");
		var html = "";
	//	m=["aa","bb"];
		for(var i=0;i<m.length;i++){
			if(i==0){
				html=html+"<p>"
					+"<input type='text' class='appoint_result appoint_result_name' placeholder='如' value='"+m[i]+"'/>"
					+"<input type='text' class='appoint_result appoint_result_detail' placeholder='如'/>"
					+"<span class='font_green' onclick='special_addTag.addResult(this)'> [+]</span>"
					+"</p>";
			}
			if(i>0){
				html=html+"<p>"
					+"<input type='text' class='appoint_result appoint_result_name' placeholder='如' value='"+m[i]+"'/>"
					+"<input type='text' class='appoint_result appoint_result_detail' placeholder='如'/>"
					+"<span class='font_green' onclick='special_addTag.delResult(this)'> [-]</span>"
					+"</p>";
			}
		}
		$(tag).html(html);
	},
	//获取列表的值
	getResult:function(){
		var arrResult = [];
		$(".appoint_result").each(function (index,value) {
			console.log("进来了");
			var arrChild = {}; 
			if($(this).hasClass("appoint_result_name")){
				console.log("name进来了");
				arrChild.name = $(this).val();
			}
			if($(this).hasClass("appoint_result_detail")){
				arrChild.description = $(this).val();
			}
			arrResult.push(arrChild);
		    console.log(arrResult);
		});
		
		return arrResult;
	}
}	
</script>
</body>
</html>
